<script setup lang="ts" name="SketchRuler">
import { PropType } from 'vue'
import RulerWrapper from './rulerWrapper.vue'

const emits = defineEmits(['onCornerClick', 'onLinesUpdate'])

interface ShadowType {
  x: number
  y: number
  width: number
  height: number
}
interface lineType {
  h?: Array<number>
  v?: Array<number>
}

const props = defineProps({
  eyeIcon: {
    type: String
  },
  closeEyeIcon: {
    type: String
  },
  scale: {
    type: Number,
    default: 1
  },
  ratio: {
    type: Number
    // default: window.devicePixelRatio || 1
  },
  thick: {
    type: Number,
    default: 16
  },
  startX: {
    type: Number
  },
  startY: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 200
  },
  height: {
    type: Number,
    default: 200
  },
  shadow: {
    type: Object as PropType<ShadowType>,
    default: () => {
      return {
        x: 0,
        y: 0,
        width: 0,
        height: 0
      }
    }
  },
  lines: {
    type: Object as PropType<lineType>,
    default: () => {
      return {
        h: [],
        v: []
      }
    }
  },
  isShowRuler: {
    type: Boolean,
    default: true
  },
  isShowReferLine: {
    type: Boolean,
    default: true
  }
})

const showReferLine = toRef(props, 'isShowReferLine')

const cornerIcon = computed(() => {
  return showReferLine.value ? `${props.eyeIcon || 'ri:eye-line'}` : `${props.closeEyeIcon || 'ri:eye-off-line'}`
})

const cornerStyle = computed(() => {
  return {
    width: props.thick + 'px',
    height: props.thick + 'px'
  }
})

const onCornerClick = () => {
  emits('onCornerClick', !showReferLine.value)
}

watch(
  () => props.isShowReferLine,
  () => {
    showReferLine.value = props.isShowReferLine
  }
)

// 水平辅助线更新
const hLinesUpdate = (v) => {
  emits('onLinesUpdate', { type: 'h', value: v })
}

// 垂直辅助线更新
const vLinesUpdate = (v) => {
  emits('onLinesUpdate', { type: 'v', value: v })
}
</script>

<template>
  <div id="mb-ruler" class="style-ruler mb-ruler">
    <!-- 水平方向 -->
    <RulerWrapper :vertical="false" :width="width" :height="thick" :is-show-ruler="isShowRuler" :is-show-refer-line="showReferLine" :thick="thick" :ratio="ratio" :start="startX" :lines="lines.h" :shadow-start="shadow.x" :shadow-length="shadow.width" :scale="scale" @onUpdateLines="hLinesUpdate" />
    <!-- 竖直方向 -->
    <RulerWrapper :vertical="true" :width="thick" :height="height" :is-show-ruler="isShowRuler" :is-show-refer-line="showReferLine" :thick="thick" :ratio="ratio" :start="startY" :lines="lines.v" :shadow-start="shadow.y" :shadow-length="shadow.height" :scale="scale" @onUpdateLines="vLinesUpdate" />
    <a v-if="isShowRuler" class="corner" :style="cornerStyle" @click="onCornerClick">
      <svg-icon :icon="cornerIcon"></svg-icon>
    </a>
  </div>
</template>

<style scoped lang="scss">
.style-ruler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12px;
  pointer-events: none;

  span {
    line-height: 1;
  }
}

.corner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  pointer-events: auto;

  &:hover{
    .el-icon{
      color: var(--el-color-primary);
    }
  }

  .el-icon{
    color: var(--el-text-color-regular);
    font-size: 14px!important;
  }
}

.indicator {
  position: absolute;
  pointer-events: none;

  .value {
    position: absolute;
    background: var(--el-text-color-regular);
  }
}
</style>
